import React, { useState, useEffect, useRef, FC } from 'react';
import BannerAnim from 'rc-banner-anim';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import 'rc-banner-anim/assets/index.css';
import '../index.css';

const { Element, Arrow, Thumb } = BannerAnim;
const BgElement = Element.BgElement;

const LoginLoop: FC = () => {
  const imgArray = [
    'login1.jpg',
    'login2.jpg',
    'login3.jpg',
    'login4.jpg',
    'login5.jpg',
    'login6.jpg',
  ];

  const [intShow, setIntShow] = useState(0),
    [thumbEnter, setThumbEnter] = useState(false);
  // const com:Com =  { bottom: thumbEnter ? 0 : -70 }

  const onChange = (type: string, int: number) => {
    if (type === 'before') {
      setIntShow(int);
    }
  };

  const getNextPrevNumber = () => {
    let nextInt = intShow + 1;
    let prevInt = intShow - 1;
    if (nextInt >= imgArray.length) {
      nextInt = 0;
    }
    if (prevInt < 0) {
      prevInt = imgArray.length - 1;
    }

    return [prevInt, nextInt];
  };

  const onMouseEnter = () => {
    setThumbEnter(true);
  };

  const onMouseLeave = () => {
    setThumbEnter(false);
  };

  const intArray = JSON.parse(JSON.stringify(getNextPrevNumber()));
  const thumbChildren = imgArray.map((img, i) => (
    <span key={i}>
      <i style={{ backgroundImage: `url(${img})` }} />
    </span>
  ));
  return (
    <BannerAnim
      onChange={onChange}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      prefixCls="custom-arrow-thumb"
    >
      {imgArray.map((item) => {
        return (
          <Element key={item} prefixCls="banner-user-elem">
            <BgElement
              key="bg"
              className="bg"
              style={{
                backgroundImage: `url(${item})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                width: '100%',
                height: '100%',
              }}
            />
          </Element>
        );
      })}

      <Arrow
        arrowType="prev"
        key="prev"
        prefixCls="user-arrow"
        component={TweenOne}
      >
        <div className="arrow"></div>
        <TweenOneGroup
          enter={{ opacity: 0, type: 'from' }}
          leave={{ opacity: 0 }}
          appear={false}
          className="img-wrapper"
          component="ul"
        >
          <li
            style={{ backgroundImage: `url(${imgArray[intArray[intShow]]})` }}
            key={intArray[0]}
          />
        </TweenOneGroup>
      </Arrow>
      <Arrow
        arrowType="next"
        key="next"
        prefixCls="user-arrow"
        component={TweenOne}
      >
        <div className="arrow"></div>
        <TweenOneGroup
          enter={{ opacity: 0, type: 'from' }}
          leave={{ opacity: 0 }}
          appear={false}
          className="img-wrapper"
          component="ul"
        >
          <li
            style={{ backgroundImage: `url(${imgArray[intArray[intShow]]})` }}
            key={intArray[1]}
          />
        </TweenOneGroup>
      </Arrow>
      <Thumb
        prefixCls="user-thumb"
        key="thumb"
        component={TweenOne}
        animation={{ bottom: thumbEnter ? 0 : -70 }}
      >
        {thumbChildren}
      </Thumb>
    </BannerAnim>
  );
};

export default LoginLoop;
